import React from 'react';
import { GameTurn } from '../../types';
import CollapsibleSection from '../CollapsibleSection';
import EditableText from '../EditableText';
import MarkdownRenderer from '../MarkdownRenderer';

// Memoized component for key info items to improve performance
const KeyInfoItem = React.memo(({ turn, index, currentTurnIndex, onSave }: { turn: GameTurn; index: number; currentTurnIndex: number; onSave: (index: number, value: string) => void; }) => (
    <CollapsibleSection
        title={`回合 ${index + 1}`}
        defaultOpen={index === currentTurnIndex}
        titleClassName="text-sm font-medium"
    >
        <EditableText
            isTextArea
            initialValue={turn.turnKeyInfo}
            onSave={(newVal) => onSave(index, newVal)}
            textClassName="text-xs sm:text-sm text-gray-300"
            inputClassName="bg-gray-700 text-gray-100 p-2 rounded w-full mt-1 min-h-[60px] text-xs sm:text-sm"
        >
            <MarkdownRenderer content={turn.turnKeyInfo || '无关键信息'} className="text-xs sm:text-sm text-gray-300 pt-1" />
        </EditableText>
    </CollapsibleSection>
));

export default KeyInfoItem;
